import './index.scss'
/**
 * 创建新组件之后，在all-can-use-components中添加
 * 必须应用 microCreateMinis
 * 数据必须以formData包含
 * */
import { microCreateMinis } from '../../minis'

/** 头部配置*/
export default {
  name: 'search-components',
  mixins: [microCreateMinis],
  props: {},
  data() {
    return {
      formData: {
        borderColor: '#dedede',
        // 文本位置
        alignDire: 'left',
        // 预设内容
        presetContent: '搜索你想要的商品',
        // 显示商场定位
        showShopFlag: '0',
        // 搜索栏显示扫一扫
        showScanFlag: '0',
        // 显示会员码
        showMemberCodeFlag: '0',
        // 显示消息栏
        showMsgFlag: '0',
        // 0描边 1填充
        searchCss: '0',
        // 框体样式 16PX圆角 0直角
        frameCss: '64',
        // 描边颜色
        checkBorderColor: '#dedede',
        // 文本颜色
        textColor: '#000000',
        // 背景色
        checkBgColor: '#ffffff',
        // 预定义颜色
        predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585'
        ],
        // 上边距类型
        marginTop: '5',
        // 页边距
        margins:'0',
        // 下边距类型
        marginBottom: '5',
        // 框体高度
        height: 60,
        showImageFlag: 0
      },
      activeName: 'content',
      tabData: [
        {
          label: '内容设置'
        },
        {
          label: '样式设置'
        }
      ],
      activeIndex: '0',
      id: '',
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun'// 我自己的验证规则函数  比如弹窗之类的
    }
  },
  watch: {
  },
  components: {},
  computed: {
  },
  mounted() {},
  methods: {
    resetBoderColor(type) {
      if (type === 1) {
        this.formData.checkBorderColor = '#dedede'
      } else if (type === 2) {
        this.formData.checkBgColor = '#ffffff'
      } else if (type === 3) {
        this.formData.textColor = '#000000'
      }
    },
    // 点击tab
    handleClick(index) {
      this.activeIndex = index
    },
    /**
     * 开始验证
     * */
    checkData() {
      this.myCheckResult((this.formData.title !== ''))
    },
    /** 弹窗*/
    mySelfCheckFun() { // 可以选择调用默认规则判断
      this.showCheckForm()
      this.$message.error('请填写完整信息')
    },
    radioChangeFill(val) {
      if (val === 1) {
        this.formData.borderColor = '#FFFFFF'
      } else {
        this.formData.borderColor = this.formData.checkBorderColor
      }
    },
    changeColorPicker(val) {
      this.formData.borderColor = this.formData.checkBorderColor
    }
  }
}
